import styled from 'styled-components';
import React, { CSSProperties, ReactNode, useState } from 'react';
import { Modal, Divider, Button } from 'antd';

export interface ToolbarItem {
    key?: string;
    icon?: ReactNode;
    divider?: boolean;
    disabled?: boolean;
    isAction?: boolean;
}

export interface ToolbarProps {
    style?: CSSProperties;
    items: Array<ToolbarItem>;
    activeKey?: string;
    onChange: (key: string, isAction?: boolean) => Promise<void>
}

export const Toolbar: React.FC<ToolbarProps> = (props) => {

    return (
        <Container data-tauri-drag-region style={props.style}>
            {
                props.items && props.items.map((item, index) => {
                    if (item.divider) {
                        return (
                            <Divider key={'leftItems_' + index} type={'vertical'} style={{ height: '35px' }} />
                        );
                    }
                    return (
                        <Button
                            key={'leftItems_' + index}
                            style={{ color: props.activeKey === item.key ? '#0091FF' : '#667085' }}
                            type={'text'}
                            icon={item.icon}
                            disabled={item.disabled}
                            onClick={async () => {
                                //弹出对话框
                                await props.onChange(item.key, item.isAction);
                            }}>
                        </Button>
                    );
                })
            }
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
    gap:2px;
`;
